<template>
    <div>
        <h2>基础图标</h2>
        <div class="container" id="icon">
            <div class="icon" v-for="(item, index) in basic" :key="index" @click="copy(item, index)">
                <i class="iconfont" :class="'icon-' + item" style="font-size:32px"></i>
                <div>{{ item }}</div>
            </div>
        </div>
        <h2>线框风格</h2>
        <div class="container" id="icon">
            <div class="icon" v-for="(item, index) in line" :key="index" @click="copy(item, index)">
                <i class="iconfont" :class="'icon-' + item" style="font-size:32px"></i>
                <div>{{ item }}</div>   
            </div>
        </div>
        <h2>实底风格</h2>
        <div class="container" id="icon">
            <div class="icon" v-for="(item, index) in solid" :key="index" @click="copy(item, index)">
                <i class="iconfont" :class="'icon-' + item" style="font-size:32px"></i>
                <div>{{ item }}</div>              
            </div>
        </div>
        <Teleport to="body">
            <div class="modal" v-if="open">copied</div>
        </Teleport>
        
    </div>
</template>
<script setup>
import { ref } from 'vue'
const open=ref(false)
const basic = ref(['arrow', 'arrow-left', 'arrow-up', 'arrow-down', 'success', 'cross', 'plus', 'minus', 'fail', 'circle'])
const line = ref(['location-o', 'like-o', 'star-o', 'phone-o', 'setting-o', 'fire-o', 'coupon-o', 'cart-o', 'shopping-cart-o', 'cart-circle-o', 'friends-o', 'comment-o',
    'gem-o', 'gift-o', 'point-gift-o', 'send-gift-o', 'service-o', 'bag-o', 'todo-list-o', 'balance-list-o', 'close', 'clock-o', 'question-o', 'passed', 'add-o', 'gold-coin-o', 'info-o', 'play-circle-o',
    'pause-circle-o', 'stop-circle-o', 'warning-o', 'phone-circle-o', 'music-o', 'smile-o', 'thumb-circle-o', 'comment-circle-o', 'browsing-history-o', 'underway-o', 'more-o', 'video-o', 'shop-o', 'shop-collect-o',
    'share-o', 'chat-o', 'smile-comment-o', 'vip-card-o', 'award-o', 'diamond-o', 'volume-o', 'cluster-o', 'wap-home-o', 'photo-o', 'gift-card-o', 'expand-o', 'medal-o', 'good-job-o', 'manager-o', 'label-o', 'bookmark-o',
    'bill-o', 'hot-o', 'hot-sale-o', 'new-o', 'new-arrival-o', 'goods-collect-o', 'eye-o', 'delete-o', 'font-o', 'contact', 'notes-o', 'records', 'cash-back-record', 'newspaper-o', 'discount', 'completed',
    'user-o', 'description', 'balance-o', 'refund-o', 'birthday-cake-o', 'orders-o', 'tv-o', 'envelop-o', 'flag-o', 'flower-o', 'filter-o', 'bar-chart-o', 'chart-trending-o', 'brush-o', 'apps-o', 'home-o', 'back-top',
    'search', 'points', 'edit', 'qr', 'qr-invalid', 'closed-eye', 'down', 'scan', 'revoke', 'free-postage', 'certificate', 'logistics', 'after-sale', 'exchange', 'upgrade', 'ellipsis', 'sign', 'failure', 'ecard-pay', 'peer-pay',
    'balance-pay', 'credit-pay', 'debit-pay', 'cash-on-deliver', 'other-pay', 'tosend', 'pending-payment', 'paid', 'aim', 'idcard', 'replay', 'shrink', 'shield-o', 'guide-o', 'cashier-o'])
const solid = ref(['location', 'like', 'star', 'phone', 'setting', 'fire', 'coupon', 'cart', 'shopping-cart', 'cart-circle', 'friends', 'comment',
    'gem', 'gift', 'point-gift', 'send-gift', 'service', 'bag', 'todo-list', 'balance-list', 'clear', 'clock', 'question', 'checked', 'add', 'gold-coin', 'info', 'play-circle',
    'pause-circle', 'stop-circle', 'warning', 'phone-circle', 'music', 'smile', 'thumb-circle', 'comment-circle', 'browsing-history', 'underway', 'more', 'video', 'shop', 'shop-collect',
    'share', 'chat', 'smile-comment', 'vip-card', 'award', 'diamond', 'volume', 'cluster', 'wap-home', 'photo', 'gift-card', 'expand', 'medal', 'good-job', 'manager', 'label', 'bookmark',
    'bill', 'hot', 'hot-sale', 'new', 'new-arrival', 'goods-collect', 'eye', 'delete', 'font',
    'wechat', 'wechat-pay', 'alipay', 'photograph', 'youzan-shield', 'umbrella-circle', 'bell', 'printer', 'map-marked', 'card', 'add-square', 'live',
    'lock', 'audio', 'graphic', 'column', 'invitation', 'play', 'pause', 'stop', 'weapp-nav', 'ascending', 'descending', 'bars', 'wap-nav', 'enlarge', 'photo-fail', 'sort'])
const copy = (name, index) => {
    navigator.clipboard.writeText("icon-" + name).then(() => {
        open.value=true;
        setTimeout(()=>open.value=false,1500)
        
    });

}
</script>
<style scoped>
@import 'https://at.alicdn.com/t/c/font_4336467_4odpcs24fjf.css';

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.icon {
    width: 20%;
    height: 80px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.modal {
    position: fixed;
    z-index: 999;
    /* border-radius: 15px; */
    top:50%;
    left:50%;
    padding: 5px;
    background-color: #f0f0f0;
    font-size: 15px;
}
</style>